<template>
    <div style="height:60vh" :key="isRef">
        <div style=" height: 56px;" class="mb10">
          <div style="text-align:right">
            <!-- <div> class="flex justifyContentSpaceBetween jjfp"
              <span class="ml30">可分配余额：<span class="font22 blue">{{ $formatNum(jjye) }}</span>元</span>
              <span class="ml30">已配置金额：<span class="font22 blue">{{ $formatNum(pzHjs) }}</span>元</span>
              <span class="ml30">剩余可分配额：<span class="font22 blue">{{ $formatNum(jjye - pzHjs) }}元</span></span>
            </div>
            <el-button type="primary" @click="dataFormSubmit()">保存并计算</el-button> -->
            <el-button type="primary" @click="keep">保存</el-button>
          </div>
        </div>
      <div class="bumenFen">
        <div style="width: 10%;height:70vh; overflow-y: auto;float: left">
          <div class="fangwen">
            <!-- :class="activeClass == index? 'fangwen':''" @click="getActiveClass(index)" -->
            <a class="likai mb10">{{jjxName }}</a>
          </div>

          <!-- <el-button type="warning" @click="distributionData()" style="position:absolute;bottom: 5vh;">分配信息一览</el-button> -->
        </div>
         <!-- @scroll="scrollEvent" -->
        <div style="width: 90%;height:70vh; overflow-y: auto;float: right">
          <div  class="condition-container-gr">
            <!-- <div class="h50 beijs">
              <span class="w200 blue fontweight ml30">{{ a1.jjxName }}</span>
              <span class="ml30">奖金项日期：</span>{{ a1.jjxDate }}
              <span class="ml30">可分配余额：</span><span class="font22 blue">{{
                $formatNum((sourceMap[a1.jjxId].jjZe - sourceMap[a1.jjxId].bmJj - sourceMap[a1.jjxId].dxFp).toFixed(2))
              }}</span>元
              <span class="ml30">已分配金额：</span><span class="font22 blue">{{ $formatNum(sourceMap[a1.jjxId].ygJj) }}</span>元
              <span class="ml30">剩余可分配额：</span><span class="font22 blue">{{
                $formatNum((sourceMap[a1.jjxId].jjZe - sourceMap[a1.jjxId].bmJj - sourceMap[a1.jjxId].dxFp).toFixed(2) - sourceMap[a1.jjxId].ygJj)
              }}</span>元
              <div style="float: right">
                <el-link icon="el-icon-plus" type="primary" @click="openSelectRyFz(index1)" :underline="false">添加分组
                </el-link>
              </div>
            </div> -->
            <div class="mt10">
              <div class="box-top">
                <div class="ml30 mb10">
                  <span class="numNum" style="padding:5px 10px;"></span>分组名称：{{ activeName=='first'?form.ryfzMc: form.jgFzName}}
                  <span class="fr mr20">
              <el-select v-model="form.jjWs" class="ml10">
                <el-option label="结果保留百位" value="100"></el-option>
                <el-option label="结果保留十位" value="10"></el-option>
                <el-option label="结果保留整数" value="1"></el-option>
                <el-option label="结果保留一位小数" value="0.1"></el-option>
                <el-option label="结果保留两位小数" value="0.01"></el-option>
              </el-select>
              <!-- <el-button type="primary" plain @click="btnAddItem($event,index1,index2)" class="ml10">添加奖金</el-button>
              <el-button type="danger" plain @click="btnDel($event,index1,index2)" class="ml10">删除分组</el-button> -->
              </span>
                </div>
                <div class="mb10 w99">
                  <el-card class="mb10">
                    <div>
                      <!-- <span style="color: #ff0000" class="ml10">{{ form.errMsg }}</span> -->
                      <div>
                        <span class="w200">奖金项：</span>
                        <span>
                          <el-input v-model="form.jjxMc" readonly  placeholder="" style="width:160px;"></el-input>
                      <!-- <el-select :clearable="true" v-model="form.jjxMc" placeholder="请选择" class="xiaLa"
                                 @change="elJjxChange($event,index1,index2,index3)" style="width:160px;">
                        <el-option v-for="(item,index) in jjxOptions " :key="index" :label="item.jjxMc"
                                   :value="item.id">
                        </el-option>
                      </el-select> -->
                    </span>
                        <span class="w200 ml10">公式：</span>
                        <span class="">
                      <el-select v-model="form.gsId" placeholder="请选择" clearable
                                 @change="elGsChange()" class="xiaLa" style="width:160px;">
                        <el-option :label="'平均分配'" :value="-1">
                        </el-option>
                        <el-option v-for="(item1,index) in gsData " :key="index" :label="item1.gsMc" :value="item1.id">
                        </el-option>
                      </el-select>
                    </span>
                        <span class="w200 ml10">金额：</span>
                        <span class="">
                      <el-input-number v-model="form.jjxJe" :precision="2" :step="1" :min="0" @change="pzChange"
                                       style="width:160px;" :disabled="form.gsId==-1"></el-input-number>
                    </span>
                        <span class="ml10">日期：</span>
                        <span class="">
                      <el-input v-model="form.jjxDate" placeholder="日期" style="width:160px;"></el-input>
                    </span>
                        <span class="ml10">
                      <el-checkbox v-if="activeName=='first'" v-model="form.jkjbj">含加扣奖</el-checkbox>
                    </span>
                        <!-- <span>
                          <el-button type="danger" plain @click="btnDel3($event,index1,index2,index3)"
                                    class="fr">删除奖金</el-button>
                        </span> -->
                      </div>

                      <el-row v-if="form.gsId==-1&&activeName=='first'" :gutter="20" class="jiaJia">
                        <el-form label-width="100px">
                          <el-col :span="6" v-for="(d,s) in renList" :key="s" style="margin-top: 10px;">
                            <el-form-item :label="d.ryName+'：'">
                              <el-input-number v-model="d.jjJe" :precision="2" :step="1" :min="0" style="width:200px"
                                               @change="pzChanges(s)"
                              ></el-input-number>
                            </el-form-item>
                          </el-col>
                        </el-form>
                      </el-row>
                      <el-row v-if="form.gsId==-1&&activeName=='second'" :gutter="20" class="jiaJia">
                         <template v-for="(d,s) in jiList">
                          <el-col :span="12">
                            <div style="margin-top: 10px;text-align: right;width: auto;float:left">
                              {{ d.deptName + '：' }}
                            </div>
                            <div style="margin-top: 10px;width: 30%;float:left">
                              <el-input-number v-model="d.jjJe" :precision="2" :step="1" :min="0" style="width:100%; float: right;"
                                               @change="pzChanges(s)"
                              ></el-input-number>
                            </div>
                          </el-col>
                        </template>
                      </el-row>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <el-drawer title="分配信息一览" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="70vh" :destroy-on-close="true">
        <el-table :data="fpsjList" :span-method="fpqkSpanMethod" height="90%" border width="100%" v-if="tablebz">
          <el-table-column type="index" width="80px" label="序号" align="center"></el-table-column>
          <el-table-column label="奖项" align="center">
            <el-table-column prop="zjjxMc" label="主奖金项" min-width="70px" align="center">
              <template slot-scope="scope">
                {{ scope.row.zjjxMc }}<br>
                剩余金额：{{
                  $formatNum(sourceMap[scope.row.zjjxId].jjZe - sourceMap[scope.row.zjjxId].bmJj - sourceMap[scope.row.zjjxId].dxFp - sourceMap[scope.row.zjjxId].ygJj)
                }}元
              </template>
            </el-table-column>
            <el-table-column prop="jjxMc" label="拆分奖金项" min-width="70px" align="center"></el-table-column>
          </el-table-column>
          <el-table-column v-for="(item,index) in lieList" :key="index" :prop="item" min-width="100px" align="center">
            <template slot="header" slot-scope="scope">
              {{ item }}<br>合计金额：{{ $formatNum(selBthj(item)) }}元
            </template>
            <template slot-scope="scope">
              <el-popover trigger="click" placement="top" style="overflow-y: auto;height:60vh!important;max-width: 1000px;">
                <div v-for="(item,index) in dygList" :key="index" class="font16">
                  <div class="h50 flex justifyContentSpaceBetween alignItemsCenter">
                    <span>
                      <span>
                        <a slot="label" :href="'#jjxgr'+scope.row.zjjxId" @click="close"><i class="el-icon-location"></i></a>
                        <span class="red ml10">{{ item.jjxName }}</span></span>
                      <span class="ml10"><b>公式：</b>{{ item.gsId == -1 ? "定额分配" : item.gsName }}</span>
                    </span>
                    <span class="fr">
                  <span class="ml10"><b>金额：</b></span>
                  <el-input-number v-model="item.jjJe" :precision="2" :step="1" :min="0" @change="pzChange" class="ml10" :disabled="item.gsId==-1"></el-input-number>
                  </span>
                  </div>
                                 <a slot="label" :href="'#jjxgr'+scope.row.zjjxId" class="dwanniu mb10" @click="close">信息定位</a>
                </div>
                <div slot="reference" class="name-wrapper" @click="selJjxMx(scope.row.zjjxId,scope.row.jjxId,item)">
                  <span v-if="scope.row[item] == undefined || scope.row[item] == ''"></span>
                  <el-tag size="medium" style="cursor:pointer;" v-else>{{ $formatNum(selJjhj(scope.row.zjjxId, scope.row.jjxId, item)) }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer> -->
    </div>
</template>

<script>
import {getJjDeptJjgtoPrant} from '@/api/admin/sysformula'
import { getFzList,jiGougetFzList} from '@/api/jiangjin/jiangjinryfzmxb'
export default {
    name:"jiangjinxiang-table",
    data(){
        return{
          form:{},
          gsData:[],
          jjxOptions:[],
          activeName:"",
          jjxName:"",
          renList:[],
          jiList:[],
          isRef:false
        }
    },
    methods:{
      //保存
      keep(){
        var fzInfo=[];
        fzInfo=this.activeName=='first'?this.renList:this.jiList
        if(this.form.gsId==-1){
          this.form.fzInfo=fzInfo
        }else{
          this.form.fzInfo=[]
        }
       ////console.log("this.form:"+JSON.stringify(this.form))
        this.$emit('jiangjinxChild',this.form)
      },
      init(data){
      // //console.log("奖金:"+JSON.stringify(data))
        this.activeName=data.activeName
        this.form=data.row;
        this.jjxName=data.jjxName
        this.getGsListOption();
        this.getRenJi(data.row.id)
        
      },
      getRenJi(fzid){
          getFzList(fzid).then(res=>{
            this.renList=res.data.data;
            this.renList=this.renList.map(item=>{
                item.jjJe=0;
                return item
            })
            this.pingJun()
          })
          jiGougetFzList(fzid).then(res=>{
            this.jiList=res.data.data.map(item=>{
                item.jjJe=0;
                item.deptName=item.jgDeptName
                item.deptCode=item.jgDeptCode
                return item
            })
            this.pingJun()
          })
      },
      pzChanges(index){
        this.$message.closeAll()
        if(this.activeName=='first'){
            var renZ=0,renList=[];
            renList=this.renList.map(item=>{
              return item.jjJe*1
            })
            renZ=this.sum(renList)
             if(renZ*1>this.form.jjxJe*1){
                this.$message.warning('人员总额不能超过平均分配金额!')
                this.renList[index].jjJe=0;
                this.$forceUpdate()
              }

            //  if(renZ*1<this.form.jjxJe*1){
            //    this.$message.warning('人员定额分配未完成!')
            //  } 
        }
        if(this.activeName=='second'){
          var jiZ=0,jiList=[]
          jiList=this.jiList.map(item=>{
            return item.jjJe*1
          })
          jiZ=this.sum(jiList)
         if(jiZ*1>this.form.jjxJe*1){
                this.$message.warning('机构分组总额不能超过平均分配金额!')
                this.jiList[index].jjJe=0;
                this.$forceUpdate()
              }
          // if(jiZ*1<this.form.jjxJe*1){
          //      this.$message.warning('机构分组定额分配未完成!')
          //    }     
        }
        this.isRef=!this.isRef
      },
      //数组总和
    sum(arr) {
          return arr.reduce(function(prev, curr, idx, arr){
              return prev*1 + curr*1;
          });
      },
      //公式配置已分配金额计算
      pzChange() {
        let zhjs = 0;

        for (let a in this.sourceData) {
          let hjs = 0;
          for (let b in this.sourceDataSub[this.sourceData[a].jjxId]) {
            for (var c in this.sourceDataSub[this.sourceData[a].jjxId][b].jjConfig) {
              hjs += (this.sourceDataSub[this.sourceData[a].jjxId][b].jjConfig[c].jjJe == undefined ? 0 : this.sourceDataSub[this.sourceData[a].jjxId][b].jjConfig[c].jjJe);

            }
          }

          this.sourceMap[this.sourceData[a].jjxId].jjYe = parseFloat((this.sourceMap[this.sourceData[a].jjxId].jjZe - this.sourceMap[this.sourceData[a].jjxId].bmJj - this.sourceMap[this.sourceData[a].jjxId].dxFp - hjs.toFixed(2)).toFixed(2));
          this.sourceMap[this.sourceData[a].jjxId].ygJj = parseFloat(hjs.toFixed(2));

          zhjs = zhjs + hjs;
        }

        this.pzHjs = zhjs.toFixed(2);
      },
      elGsChange() {
       //console.log(this.form.gsId)
        if(this.form.gsId==-1){
          this.form.gsName="平均分配";
          this.pingJun()
        }else{
          var arr=this.gsData.filter(item=>{
          return item.id==this.form.gsId
        })
        this.form.gsName=arr[0].gsMc
        }
      },
      pingJun(){
        if(this.activeName=='first'){
          var len=this.renList.length;
          var jjJe=(this.form.jjxJe/len).toFixed(2)
          for(var i in this.renList){
              this.renList[i].jjJe=jjJe
          } 
        }
        if(this.activeName=='second'){
          var len=this.jiList.length;
          var jjJe=(this.form.jjxJe/len).toFixed(2)
          for(var i in this.jiList){
              this.jiList[i].jjJe=jjJe
          } 
        }
      },
      //取得基本数据
      getGsListOption() {
        if(this.activeName=='first'){
          var params={
              id: this.deptId, 
              gsType: '奖金算法', 
              gsFl: '个人'
          }
        }
        if(this.activeName=='second'){
          var params={
              id: this.deptId, 
              getJJxNamesType: '奖金算法', 
              gsFl: '部门'
          }
        }
        //取得公式数组
        getJjDeptJjgtoPrant(params).then(res => {
          this.gsData = res.data.data;
        })

        // //取得奖金项
        // getJjDeptJjx(this.deptId).then(res => {
        //   const xData = res.data.data;
        //   this.jjxOptions = [];
        //   this.jjxOptions = xData;
        // })
      },
      //取得公式名称
      getGsMc(key) {
        let lResult = "";
        this.gsData.find(u => {
          if (u.id === key) {
            lResult = u.gsMc;
          }
        })
        return lResult;
      },
        // 初始化
        csh() {
            
        },
       
      
    }
}
</script>

<style>

</style>